<!--  角色管理页-->
<template>

    <ex_super_table_page v-bind="option" class="page-container" ref="SuperTablePage">

      <template v-slot:productInfo="{row}">

        <div style="width: 100%;" :class="row.status=='DISABLED'? 'disable-class': ''">
          <div style="display: flex; line-height: 32px; ">
            <div style="font-weight: bold; color: #383838;">{{row.productName}} &nbsp; [{{row.productCode}}] </div>
            <div style="margin-left: 40px; font-weight: bold; color: #383838;">类型: {{$tt('PmsProductTypeEnum__' + row.productType)}} </div>
          </div>
          <div style="line-height: 32px;">线路: {{ row.startPlaceName + ' -> ' + row.endPlaceName }}</div>
          <div style="line-height: 32px;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; ">
            <div v-if="row.productType=='FIRST_TRANSPORT' && row.startPlaceWarehouse && row.startPlaceWarehouse.length > 0"
                 style=" white-space: nowrap; text-overflow: ellipsis; overflow: hidden; "
            >始发仓: {{ row.startPlaceWarehouse.map(e=>e.warehouseName).join(', ') }}</div>
            <div v-if="row.endPlaceWarehouse && row.endPlaceWarehouse.length > 0"
                 style=" white-space: nowrap; text-overflow: ellipsis; overflow: hidden; "
            >库存仓: {{ row.endPlaceWarehouse.map(e=>e.warehouseName).join(', ') }}</div>
          </div>
          <div style="line-height: 32px;">
            <span :class="(row.productType == 'FIRST_TRANSPORT' ? 'tag-blue2' : 'tag-green2') + '  tag-product'">{{$tt('PmsProductTypeEnum__' + row.productType)}}</span>
            <span v-if="row.matchPriority=='PRICE_FIRST'" class="tag-orange tag-product">{{ $tt('PmsTransportMatchPriorityEnum__' + row.matchPriority) }}</span>
            <span v-if="row.matchPriority=='TIME_FIRST'"class="tag-pink tag-product">{{ $tt('PmsTransportMatchPriorityEnum__' + row.matchPriority) }}</span>
            <span class="tag-blue tag-product">时效: {{row.prescription}}小时</span>
            <span v-if="row.supportInsurance=='Y'" class="tag-green tag-product">保险</span>
            <span v-if="row.productType=='LAST_TRANSPORT'" :class="(row.packageType == 'ONE_TICKET_ONE_PIECE' ? 'tag-yellow' : 'tag-orange') + '  tag-product'">{{ $tt('PmsPackageTypeEnum__' + row.packageType) }}</span>

            <span v-if="row.priceModel=='OFFLINE'" class="tag-orange">{{ $tt('CustomerOrderPriceModelEnum__' + row.priceModel) }}</span>


          </div>
          <div>{{$t('label_remark')}}：{{ row.remark }}</div>
        </div>

      </template>

      <template v-slot:priceInfo="{row}">

        <!-- 价卡信息 -->
        <div
          style="display: flex;  line-height: 32px; flex-direction: column; flex:1; " :class=" (row.status=='DISABLED'? 'disable-class': '') + ' '" >

          <div
            style="display: flex;  align-items: center;  line-height: 32px;  flex-direction: row;" class="price-version-row-div">

            <div style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">
              <template  v-if="row.priceModel=='ONLINE'">
                标准价卡
              </template>
            </div>
            <div style="flex: 1;  margin-left: 12px;">
              <template  v-if="row.priceModel=='ONLINE'">
                <span v-for="(item,index) in row.standardPriceVersions">
                   <span :class=" isExpired(item.versionEndTime) ? `tag-red tag-product`: `tag-blue tag-product`">
                  <i class="el-icon-check" v-if="index==0 && row.status=='ENABLE' && !isExpired(item.versionEndTime) ">生效中</i>
                  <i class="el-icon-warning-outline"  v-if="isExpired(item.versionEndTime)">>已过期</i>
                    {{ $dateFormatDate(item.versionStartTime)}}
                  <template v-if="index == row.standardPriceVersions.length - 1 ">{{ ' 至 ' + $dateFormatDate(item.versionEndTime)  }}</template>
                  </span>
                  </span>
              </template>
            </div>

            <div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">
              <el-button type="text"
              v-auth="'pms_transport_product_edit'"
              @click="$router.push({
                      path: '/page/pms/transport_product_edit',
                      query: { 'id': row.id, 'edit': true }
                    })">编辑产品</el-button>
              <ex-button-delete
                v-if="row.status=='ENABLE'"
                v-auth="'pms_transport_product_disable'"
                deleteUrl="/fms-api/product/PmsTransportProductRpc/updateStatus.json"
                :deleteParam="{ 'id': row.id, 'status': 'DISABLED'}"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认禁用该产品？"
                label="禁用产品"
              >
              </ex-button-delete>
              <ex-button-delete
                v-if="row.status=='DISABLED'"
                v-auth="'pms_transport_product_disable'"
                deleteUrl="/fms-api/product/PmsTransportProductRpc/updateStatus.json"
                :deleteParam="{ 'id': row.id, 'status': 'ENABLE' }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认启用该产品？"
                label="启用产品"
              >
              </ex-button-delete>
              <el-button type="text"
              v-auth="'pms_transport_product_edit'"
              @click="addNewCustomerPrice(row) " style="margin-left: 0px;">添加价卡</el-button>
              <el-button type="text"
              v-auth="'pms_transport_product_edit'"
              @click="
                $refs['pmsProductPermission'].showDialog({
                  'showType': 'product',
                  'productId': row.id,
                  'versionId': -1,
                  'customerViewType': row.customerViewType,
                  'productCode': row.productCode,
                  'productName': row.productName
                }) "  style="margin-left: 0px;">权限控制</el-button>
            </div>
          </div>

          <div
            v-if="row.priceModel=='ONLINE'"
            v-for="(item,index) in row.customerPriceVersions" style="display: flex; align-items: center;   line-height: 32px;  flex-direction: row;" :class="(item.status=='DISABLED'? 'disable-class': '') + ' price-version-row-div'" >
            <div style="width: 90px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;  ">{{item.versionName}}</div>
            <div style="flex: 1;  margin-left: 12px;">
              <span v-for="(subItem,index) in item.versions">
                <span :class="isExpired(subItem.versionEndTime) ? `tag-red tag-product`: `tag-blue tag-product`">
                <i class="el-icon-check" v-if="index==0 && item.status=='ENABLE' && !isExpired(subItem.versionEndTime) ">生效中</i>
                <i class="el-icon-warning" v-if="isExpired(subItem.versionEndTime)">已过期</i>
                {{ $dateFormatDate(subItem.versionStartTime) }}
                <template v-if="index == item.versions.length - 1 ">{{ ' 至 ' + $dateFormatDate(subItem.versionEndTime) }}</template>
                 </span>
              </span>
            </div>
            <div style="width:280px; padding-left: 12px; display: flex; gap: 10px; ">
              <el-button type="text" v-auth="'pms_transport_product_edit'" @click="$router.push({
                      path: '/page/pms/transport_product_edit_customer',
                      query: { 'pid': row.id, 'vid': item.versionId }
                    })">编辑价卡</el-button>
              <ex-button-delete
                v-if="item.status=='ENABLE'"
                v-auth="'pms_transport_product_disable'"
                deleteUrl="/fms-api/product/PmsTransportCustomerRpc/updateStatus.json"
                :deleteParam="{ 'id': item.versionId, 'status': 'DISABLED'}"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认禁用该价卡？"
                label="禁用价卡"
              >
              </ex-button-delete>
              <ex-button-delete
                v-else
                v-auth="'pms_transport_product_disable'"

                deleteUrl="/fms-api/product/PmsTransportCustomerRpc/updateStatus.json"
                :deleteParam="{ 'id': item.versionId, 'status': 'ENABLE' }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认启用该价卡？"
                label="启用价卡"
              >
              </ex-button-delete>

              <ex-button-delete
              v-auth="'pms_transport_product_edit'"
                deleteUrl="/fms-api/product/PmsTransportCustomerRpc/remove.json"
                :deleteParam="{ 'id': item.versionId }"
                @afterOperationDone="$refs['SuperTablePage'].reload()"
                message="确认删除价卡吗？"
                label="删除价卡"
              >
              </ex-button-delete>

              <el-button type="text"
              v-auth="'pms_transport_product_edit'"
              @click="
                $refs['pmsProductPermission'].showDialog({
                  'showType': 'version',
                  'productId': row.id,
                  'productCode': row.productCode,
                  'productName': row.productName ,
                  'versionId': item.versionId,
                  'versionName': item.versionName,
                  'customerViewType': 'WHITE'

                }) "  style="margin-left: 0px;">生效客户</el-button>

            </div>
          </div>

        </div>

      </template>

      <template v-slot:permission>
        <pms-product-permission ref="pmsProductPermission" @customerViewTypeChangeSuccess="$refs['SuperTablePage'].reload()"></pms-product-permission>
      </template>

    </ex_super_table_page>

</template>

<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import emitOnFunction from '@/mixin/emit-on-function';

import PmsProductPermission from '@/component/pms/pms-product-permission.vue'

let emitKey = 'pms>transport_product'
export default {

  // 物流产品管理
  title: 'title_pms_transport_product_manage',
  mixins: [superTablePageFunction, emitOnFunction(emitKey)],
  components: { PmsProductPermission },

  data() {
    return {
      option: {
        search: {
          model: [
            { slot: "permission"},
            // 产品名
            { label: "label_pms_product_name", key: "productName", },

            { label: "label_pms_product_code", key: "productCode", },
            // 产品类别
            {
              label: 'label_pms_product_type', key: 'productType', type: 'select', enum: 'PmsProductTypeEnum',
              attrs: {
                clearable: true,
                listHandler: (list) => list.filter(it => !["INSURANCE", "WAREHOUSE"].includes(it))
              }
            },
            // 状态
            { label: "label_pms_product_status", key: "status", type: 'select', enum: 'IsAvailableStatusEnum', attrs: {clearable: true} },
            {
              label: "label_billing_warehouse", key: "warehouseId", type: 'base_warehouse_select', fold: false,
            },
          ],
        },

        action: [
          {
            // 新增物流产品
            label: "label_pms_add_transport_product",
            auth:'pms_transport_product_edit',
            attrs: { icon: "el-icon-plus" }, click: () => {
              this.$router.push({
                path: '/page/pms/transport_product_edit', query: { emitKey }
              });
            }
          },
        ],

        table: {

          'cell-class-name': ({ row, column, rowIndex, columnIndex })=>{
            return 'tableCell_noHoverLight'
          },
          url: "/fms-api/product/PmsTransportProductRpc/selectAll.json",
          model: [
            { slot: "productInfo" , label: '产品信息', align: 'left', 'min-width': 300 },
            { slot: "priceInfo" , label: '价卡配置', align: 'left', 'min-width': 600 },

            // // 物流产品名称
            // { key: 'productName', label: 'label_pms_product_name', align: 'left' },
            // // 产品编码
            // { key: 'productCode', label: 'label_pms_product_code', align: 'left' },
            // // 产品类型
            // { key: 'productType', label: 'label_pms_product_type', align: 'left', attrs: { formatter: (r, c, v, i) => { return this.$tt('PmsProductTypeEnum__' + v) } } },
            // 关联线路
            // {
            //   key: 'startPlaceId', label: 'label_pms_ref_line_info', align: 'left', attrs: {
            //     formatter: (r, c, v, i) => {
            //       return r.startPlaceName + ' -> ' + r.endPlaceName
            //     }
            //   }
            // },
            // // 运输时效
            // { key: 'prescription', label: 'label_pms_prescription' },
            // // 状态
            // { key: 'status', label: 'label_pms_product_status', formatter: (r, c, v, i) => this.$enumShow(v, "IsAvailableStatusEnum") },
            // // 创建人
            // { key: 'creator', label: 'label_create_user', },
            // // 最后修改
            // { key: 'modifier', label: 'label_modify_user' },
            // // 最后修改时间
            // { key: 'gmtModify', label: 'label_modify_time', attrs: { formatter: (r, c, v, i) => { return this.$dateFormat(v) } } },
            // {
            //   type: 'operate', width: 220, operate: [
            //     // 编辑
            //     {
            //       label: "label_edit", click: (row) => {
            //         this.$router.push({
            //           path: '/page/pms/transport_product_edit',
            //           query: { id: row.id, emitKey, edit: true }
            //         })
            //       }
            //     },
            //     // 启用
            //     {
            //       label: "label_start_using", type: 'confirm-button', url: '/fms-api/product/PmsTransportProductRpc/updateStatus.json',
            //       message: this.$tt('label_sure_to_enable_this'),
            //       if: row => !row.status || row.status == 'DISABLED',
            //       params: (row) => { return { id: row.id, status: 'ENABLE' } }, done: ['reload', 'tip']
            //     },
            //     // 禁用
            //     {
            //       label: "label_disable_using", type: 'confirm-button', url: '/fms-api/product/PmsTransportProductRpc/updateStatus.json',
            //       message: this.$tt('label_sure_to_disable_this'),
            //       if: row => row.status == 'ENABLE',
            //       params: (row) => { return { id: row.id, status: 'DISABLED' } }, done: ['reload', 'tip']
            //     }
            //
            //   ]
            // }
          ]

        }

      },


    };
  },


  methods:{

    // 判断是否过期
    isExpired(time){
      return time < new Date().getTime()
    },

    addNewCustomerPrice(row){

      let _this = this

      _this.$ajax({
        url: '/fms-api/product/PmsTransportCustomerRpc/getRandomId.json',
        data:{
          "productId": row.id
        },
        success: (res) => {
          let tmpId = res.data
          _this.$router.push({
            path: '/page/pms/transport_product_edit_customer',
            query: { 'pid': row.id, 'vid': tmpId }
          })
        },
        afterAjax() {

        }
      });

    }

  }

};

</script>
<style>


  .tag-orange{
    border: 1px solid #e37324;
    color: #e37324;
    padding: 2px 6px 2px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-red{
    border: 1px solid #c42020;
    color: #c42020;
    padding: 2px 6px 2px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-pink{
    border: 1px solid #bb3cdb;
    color: #bb3cdb;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-blue{
    border: 1px solid #2d8ae5;
    color: #2d8ae5;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-blue2{
    border: 1px solid #2d8ae5;
    background-color: #2d8ae5;
    color: #fff;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-orange{
    border: 1px solid #ec9146;
    color: #ec9146;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }
  .tag-green{
    border: 1px solid #278000;
    color: #278000;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-green2{
    border: 1px solid #278000;
    background-color: #278000;
    color: #fff;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-yellow{
    border: 1px solid #c6ab0a;
    color: #c6ab0a;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .tag-gray{
    border: 1px solid #807e7e;
    color: #807e7e;
    padding: 1px 6px 1px 6px;
    border-radius: 6px;
    margin-right: 10px;
    word-break: keep-all;
  }

  .product-table-td{
    vertical-align: top;
  }

  .disable-class .tag-product{
    color: #b4b4b4;
    border: 1px solid #b4b4b4;
  }


  .price-version-row-div:hover{
    background-color: #ebfbff;
  }

</style>
